<template>
  <div>
    <div id="investBox">
      <div class="investTopBox">
        <Search id="searchBox" @filterDebtResult="filterDebtResult" @toSearch="toSearch1" @getContent="getContent"></Search>
        <Sort @getSort1="getSort" v-show="!iSearchPage"></Sort>
      </div>
        <Recommend 
          v-infinite-scroll="loadMore"
          :infinite-scroll-disabled="loading"
          infinite-scroll-distance="0px"
          :cpList="listItems" 
          v-show="!iSearchPage" 
          v-if="listItems"></Recommend>
      <div v-else style="font-size:.4rem;color:#c9c9c9;text-align:center">无筛选结果</div>
        <div v-show="onLoading">
          <div style="text-align:center;" v-if="isHasContent">
            <inline-loading></inline-loading><span style="vertical-align:middle;display:inline-block;font-size:14px;">&nbsp;&nbsp;加载中...</span>
          </div>
          <div style="text-align:center;" v-else>无更多内容</div>
        </div>
    </div>
    <div class="myMsgBtn" @click="toRelease">我要发布</div>
    <BottomBar></BottomBar>
  </div>
</template>
<script>
import Search from './children/Search'
import Sort from './children/Sort'
import Recommend from './children/DebtRecommend'
import BottomBar from '../../component/common/BottomBar'
import {getSDK} from '../../../service/wxShare.js'
import {getDebt} from '../../../service/getData.js'
import { Loadmore } from 'mint-ui';
import { InfiniteScroll } from 'mint-ui';
import { InlineLoading } from 'vux'
import { setTimeout } from 'timers';
export default {
  components:{
    Search,
    Sort,
    BottomBar,
    Recommend,
    InlineLoading,
  },
  beforeCreate(){
    getSDK()
  },
  created(){
    getDebt()//获取items的list
      .then(res=>{
          // console.log(res);
          if(res.status == 1){
              // console.log(res.list);
              this.pages = res.pages
              this.listItems = res.list
              this.defaultList = JSON.parse(JSON.stringify(res.list))//深拷贝作为初始值
          }
      })
  },
  data(){
    return {
      listItems:[
        // {
        //   id:'10421',
        //   name:'短融网',
        //   off:'0.3',
        //   investMoney:'9000',
        //   debtMoney:'10000',
        //   investTime:'2018-10-10',
        //   backTime:'2018-10-10'
        // },
        // {
        //   id:'10421',
        //   name:'短融网',
        //   off:'0.3',
        //   investMoney:'9000',
        //   debtMoney:'10000',
        //   investTime:'2018-10-10',
        //   backTime:'2018-10-10'
        // },
        // {
        //   id:'10421',
        //   name:'短融网',
        //   off:'0.3',
        //   investMoney:'9000',
        //   debtMoney:'10000',
        //   investTime:'2018-10-10',
        //   backTime:'2018-10-10'
        // },
        // {
        //   id:'10421',
        //   name:'短融网',
        //   off:'0.3',
        //   investMoney:'9000',
        //   debtMoney:'10000',
        //   investTime:'2018-10-10',
        //   backTime:'2018-10-10'
        // },
        // {
        //   id:'10421',
        //   name:'短融网',
        //   off:'0.3',
        //   investMoney:'9000',
        //   debtMoney:'10000',
        //   investTime:'2018-10-10',
        //   backTime:'2018-10-10'
        // },
        // {
        //   id:'10421',
        //   name:'短融网',
        //   off:'0.3',
        //   investMoney:'9000',
        //   debtMoney:'10000',
        //   investTime:'2018-10-10',
        //   backTime:'2018-10-10'
        // },
      ],
      sortType:0,
      defaultList:[],
      iSearchPage:false,
      loading:false,
      onLoading:false,
      pages:0,
      currentPage:1,
      isHasContent:true,
      isFristLoad:true
    }
  },
  methods:{
    getContent(data){
      // console.log(data);
    },
    loadMore() {
      if(this.isFristLoad){
        this.isFristLoad = false
      }else{
        if(!this.onLoading){
          // console.log('this.onLoading: ', this.onLoading);
          this.onLoading = true
          if(this.currentPage < this.pages){
            // console.log('this.currentPage: ', this.currentPage+1);
            this.isHasContent = true

            getDebt(this.currentPage+1)
              .then(res=>{
                if(res.status == 1){
                  setTimeout(()=>{
                    this.listItems.push(res.list)
                    this.defaultList.push(res.list)

                    this.loading = false;
                    this.onLoading = false

                    this.currentPage ++
                  },3000)
                }
              })

            // setTimeout(() => {
            //   this.listItems.push({
            //   id:'88888',
            //   pt_name:'短融网',
            //   sale:'0.3',
            //   tzmoney:'9000',
            //   zrmoney:'10000',
            //   tztime:'2018-10-10',
            //   dqtime:'2018-10-10'
            // })
            //   this.loading = false;
            //   this.onLoading = false
            // }, 3000);
          }else{
            this.isHasContent = false
          }
        }
      }
    },
    toRelease(){
      this.$router.push('/release')
    },
    loadTop() {
      // 加载更多数据
      this.$refs.loadmore.onTopLoaded();
    },
    toSearch1(data){
      this.iSearchPage = data
    },
    getSort(data){
      this.sortType = data
    },
    filterDebtResult(data){
      this.listItems = data
      // console.log('this.listItems: ', this.listItems);
      this.defaultList = JSON.parse(JSON.stringify(data))
    },
    compare1(property){//年化 and 返利排序
      return (a,b)=>{
        var val1 = a[property];
        var val2 = b[property]
        return val1 - val2 
      }
    },
    compare2(property){//期限排序
      return (a,b)=>{
        var val1 = new Date(a[property]).getTime()
        var val2 = new Date(b[property]).getTime()
        return val1 - val2
      }
    },
    // compare3(property){
    //   return (a,b)=>{
    //     let reg = /(\d+).*/
    //     var val1 = a[property].replace(reg,"$1")
    //     var val2 = b[property].replace(reg,"$1")
    //     return val1 - val2
    //   }
    // },
  },
  watch:{//监听是哪种排序
    sortType(val){
      switch(val){
        case 1:
          this.listItems.sort(this.compare1('dqtime'))
        break;
        case 2:
          this.listItems.reverse()
        break;
        case 3:
          this.listItems.sort(this.compare1('sale'))
        break;
        case 4:
          this.listItems.reverse()
        break;
        case 5:
          this.listItems.sort(this.compare1('tzmoney'))
        break;
        case 6:
          this.listItems.reverse()
        break;
        case 0:
          this.listItems = JSON.parse(JSON.stringify(this.defaultList))
        break;
      }
    }
  },
  deactivated () {
    this.$destroy()
  }
}
</script>
<style lang="less">
@import '../../../style/mixin.less';
@import "../../../style/mint.css";

  #investBox{
    width: 92%;
    margin: 0 auto;
    padding-bottom: 3rem;
    // background-color: yellowgreen;
    // .investTopBox{
    //   .fx(row);
    //   width: 100%;
    // }
  }
  .weui-tabbar{
    position: fixed !important;
  }
  .iconSearch{
    width:.5rem;
    height: .5rem;
    position: absolute;
    top: 0.4rem;
    left: 0.7rem;
  }
  .myMsgBtn{
    .wh(90%,1.2rem);
    .bg(#dd3930);
    .fx();
    .sc(.4rem,#ffffff);
    .borderRadius(2rem);
    position: fixed;
    left: .5rem;
    bottom: 1.6rem;
  }
</style>
